﻿<h2>List of icons</h2>
<div style="display: flex; justify-content: space-between;">
    <RadioGroup @bind-Value="currentTheme" ButtonStyle="RadioButtonStyle.Solid" Size="InputSize.Large" TValue="IconThemeType" OnChange="OnThemeChanged">
        <Radio RadioButton Value="IconThemeType.Outline">
            <Icon Component="OutlineSvg" />@Localizer["app.docs.components.icon.outlined"]
        </Radio>
        <Radio RadioButton Value="IconThemeType.Fill">
            <Icon Component="FilledSvg" />@Localizer["app.docs.components.icon.filled"]
        </Radio>
        <Radio RadioButton Value="IconThemeType.TwoTone">
            <Icon Component="TwoToneSvg" />@Localizer["app.docs.components.icon.two-tone"]
        </Radio>
    </RadioGroup>
    <Search Size="InputSize.Large"
    WrapperStyle="margin: 0px 10px; flex: 1 1 0%;"
    Placeholder="@Localizer["app.docs.components.icon.search.placeholder"]"
    OnInput="@(args => OnSearching(args.Value?.ToString()))" />
</div>

@if (displayIcons == null || displayIcons.Count == 0)
{
    <div style="text-align:center; margin-top:20px;">
        <Spin Size="SpinSize.Large" Tip="Loading..." />
    </div>
}
else
{
    foreach (var item in displayIcons)
    {
        <h3>@Localizer["app.docs.components.icon.category." + @item.Category]</h3>

        <ul class="anticons-list">
            @foreach (var name in item.IconNames)
            {
                <li class="@item.Category" @onclick="(() => OnCopyClick(currentTheme, name))">
                    <Icon Type="@name" Theme="@currentTheme" Style="font-size:36px" @key="@($"{currentTheme}-{name}")" />
                    <div class="anticon-class">
                        <Badge>@name</Badge>
                    </div>
                </li>
            }
        </ul>
    }
}


@inject AntDesign.Docs.Services.IconListService iconListService
@inject IconService IconService
@inject ILocalizationService LocalizationService
@inject IStringLocalizer Localizer;
@inject IMessageService messageService
@inject IJSRuntime JsRuntime

@code{
    private IconThemeType currentTheme = IconThemeType.Outline;
    RenderFragment OutlineSvg =@<svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" viewBox="0 0 1024 1024"><path d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4 12 12v680c0 6.6-5.4 12-12 12z"></path></svg>;
    RenderFragment FilledSvg =@<svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" viewBox="0 0 1024 1024"><path d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z"></path></svg>;
    RenderFragment TwoToneSvg =@<svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" viewBox="0 0 1024 1024"><path d="M16 512c0 273.932 222.066 496 496 496s496-222.068 496-496S785.932 16 512 16 16 238.066 16 512z m496 368V144c203.41 0 368 164.622 368 368 0 203.41-164.622 368-368 368z"></path></svg>;

    private IList<AntDesign.Docs.Services.IconItem> lstIcons { get; set; }
    private IList<AntDesign.Docs.Services.IconItem> displayIcons { get; set; }

    protected override async Task OnInitializedAsync()
    {

        await base.OnInitializedAsync();

        LocalizationService.LanguageChanged += async (_, args) =>
        {
            await InvokeAsync(StateHasChanged);
        };

        lstIcons = iconListService.GetIcons();      
        await OnThemeChanged(currentTheme);
    }

    private async Task OnSearching(string word)
    {
        lstIcons = iconListService.Search(word);
        await OnThemeChanged(currentTheme);

    }

    private async Task OnThemeChanged(IconThemeType newTheme)
    {
        displayIcons = null;

        displayIcons = new List<Services.IconItem>();
        foreach (var categorys in lstIcons)
        {
            var itemIcons = new AntDesign.Docs.Services.IconItem();
            itemIcons.Category = categorys.Category;
            itemIcons.IconNames = new List<string>();
            foreach (var item in categorys.IconNames)
            {
                var isExist = AntDesign.IconService.IconExists(currentTheme, item);

                if (isExist)
                {
                    itemIcons.IconNames.Add(item);
                }
            }

            if (itemIcons.IconNames.Count > 0)
            {
                displayIcons.Add(itemIcons);
            }
        }

        await InvokeAsync(StateHasChanged);
    }

    protected override bool ShouldRender()
    {
        return displayIcons.Any();
    }


    private void OnCopyClick(IconThemeType theme, string iconName)
    {
        string htmlIcon = $"<Icon Type=\"{iconName}\" Theme=\"{nameof(IconThemeType)}.{theme}\"/>";
        JsRuntime.InvokeAsync<object>(JSInteropConstants.Copy, htmlIcon);

        messageService.Success(htmlIcon+ "  copied 🎉!");
    }
}
